
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sitemap Celebration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="all">
<!--
body 	{font-size: 83%; line-height: 173%; font-family: Geneva, Arial, Helvetica, Sans-Serif}
h1 		{font-size: 140%;}
p 		{line-height: 165%;}
p span {font-size: 10px; color: #333;}

.nav 	{
		padding: 0; margin: 50px 0 0 70px;
		font-family: Arial, Helvetica, Sans-Serif;
		overflow: visible;
		}
		
.nav ul {		
		display: block;
		list-style: none;
		margin: -11px 0; padding: 0;
		border: 0;
		}
		
/* HACK >>> IE 5  Positioning with position relative <ul> Part I */
html + body .nav ul {position: relative; top: -10px;}

/* HACK >>> first margin for IE 6, after voice-family the hacks for gecko-based browsers and IE 5 (Win & Mac?) */
.nav ul li 	{
			position: relative; top: 0px; left: -11px;
			margin: 10px 0 5px 0; padding: 0; 
			border: 0;
			voice-family: "\"}\""; /* Gecko Stuff follows */
			margin: 10px 0 5px 10px; 
			}
			
/* HACK >>> IE 5  Positioning with position relativ, display: inline fixes an ugly margin-effect in IE 5 */
html + body .nav ul li {display: inline; width: 100%; position: relative; top: 0px; left: -12px; margin: 10px 0 5px 0;}

.nav a, .nav a:visited {
				width: 18.4em; height: 1.5em;
				display: block; 
				margin: 0 0 0 3px; padding: 1px;
				font-weight: bold; font-size: 110%; line-height: 1.5em; 
				text-indent: 0.5em; text-align: left; text-decoration: none;
				voice-family: "\"}\""; /* Gecko Stuff follows */
				margin: 0 0 0 -10px;
				}

/* HACK >>> IE 5  (avoids an ugly effect with text-indent ) */
html + body .nav a, html + body .nav a:visited { text-indent: 0; padding: 0 0 0 8px; }

.nav ul ul {	
			padding: 12px 0 18px 0;
			background: none;
			}

/* HACK >>> IE 5  Positioning with position relative <ul> Part II  */
html + body .nav ul ul {position: relative; top: 0px; }
				
.nav ul li li	{
			position: relative; top: 0px; left: 10px;
			margin: 10px 0 5px 1px; padding: 0 0 0 25px;
			voice-family: "\"}\""; /* Gecko Stuff follows */
			left: 0px;
			/* margin: 10px 0 5px 1px; padding: 0 0 0 25px; */
			}
			
/* HACK >>> IE 5  */
html + body .nav ul li li {position: relative; left: 12px; margin: 10px 0 5px 0;}

.nav ul li .sub-sub {
			/* position: relative;  top: 0px; */ left: 10px;
			margin: 10px 0 0 1px; /* padding: 0 0 0 25px;  */
			voice-family: "\"}\"";
			position: relative; top: 0px; left: 0px;
			}

.nav ul ul a, .nav ul ul a:visited 	{
					width: 15.9em; height: 1.3em;
					margin: 0; /* padding: 1px; */
					font-size: 110%; line-height: 1.3em; font-weight: normal; text-indent: 0.4em; 
					}

.nav ul ul ul {margin: 0 0 30px 12px; padding: 12px 0 0 0;}

.nav ul li li li	{
			position: relative; top: 10px; left: 0px;
			margin: 10px 0 5px 0; padding: 0 0 0 20px; 
			}

/* 1 Pixel Difference position relative <ul> for gecko-based Browsers */
html>body .nav ul li li li {top: 10px;}

/* HACK >>> IE 5  Positioning with position relative <ul> Part II  */
html + body .nav ul li li li {top: 14px;}
																		
.nav ul ul ul a, .nav ul ul ul a:visited 	{
					width: 14.9em;
					padding: 1px;
					font-size: 100%;
					}
					
/* HACK >>> IE 5  (avoids an ugly effect with text-indent ) */
html + body .nav ul ul a, html + body .nav ul ul a:visited {text-indent: 0; padding: 0 0 0 8px; }


/* ### Global Settings >>> colors, borders and images  ### */
.nav 	{ border: 0; border-left: 1px solid #2A71E4; }
.nav ul li li	{color: #000; background:  url("line-01.gif") left center no-repeat;}	
.nav ul ul ul {border-left: 1px solid #2A71E4; }
.nav ul li .sub-sub {background:  url("line-01.gif") top left no-repeat;}
.nav a, .nav a:visited	{color: #4F4F4F; border: 1px solid #2A71E4; background: #FFF; }				
.nav a:active, .nav a:hover, .nav a:focus,  a:focus .sffocus 	{color: #000; border: 1px solid #000; background: #FAFAFA;}			
.nav ul ul a, .nav ul ul a:visited 	{color: #4F4F4F; border: 1px solid #9292A1;background: #FFF;}			
.nav ul ul a:active, .nav ul ul a:hover, .nav ul ul a:focus	{color: #000; border: 1px solid #000;	background: #FAFAFA; }	

-->
</style>
	
</head>

<body>
<div id="main-container">
    <div class="nav">
        <ul>    
            <li><a href="#now-here">Fruits</a></li>	
            <li><a href="#now-here">Vegetables</a></li>	    
            <li><a href="#now-here">Corn</a>
                <!-- Second Level Start -->
                <ul>    
                    <li><a href="#now-here">Bread</a></li>
                    <li><a href="#now-here">Cake</a></li>
                    <li class="sub-sub"><a href="#now-here">Cookies</a>
                    <!-- Third Level Start -->
                        <ul>
                            <li><a href="#now-here">Cookies With Marmelade</a></li>
                            <li><a href="#now-here">Cookies With Chocolate</a></li>
                            <li><a href="#now-here">Pure Cookies</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#now-here">Water</a>	 
                <ul>
                    <li><a href="#now-here">Pure Water</a></li>
                    <li><a href="#now-here">Clean Water</a></li>
                    <li><a href="#now-here">Fresh Water</a></li>
                </ul>
            </li>
            <li><a href="#">This is the end!</a></li>
        </ul>
	</div>
</div>
</body>
</html>
